<template>
  <!--常见问题-->
<div class="container">
  <div class="main">
    <div class="service-point">
      <div class="serviceList"
            v-for="(item,index) in serviceList"
            :key="index"
            :data-id="item.id"
            :data-url="item.url"
            @click="h5Handler(item.url)">
        <img class="ico" :src="item.img" />
        <span>{{item.name}}</span>
      </div>
    </div>
  </div>
  <div class="issueList">
    <div class="tit">常见问题</div>
    <div class="item">
      <van-cell
      :title="item.name"
      custom-class="customStyle"
      is-link
      v-for="(item,index) in issueList"
      :data-id="item.id"
      :data-url="item.url"
      @click="h5Handler(item.url)"
      :key="index"/>
    </div>
  </div>
</div>

</template>
<script>
import { Toast,Cell} from 'vant'

export default {
  components:{
    [Toast.name]:Toast,
    [Cell.name]:Cell,
  },
  data(){
    return{
      serviceList: [
        { id: 1,name: '外观部件',img: require('../../../assets/issue/waiguan.png'),url:'/waiguan'},
        { id: 2, name: '刹车系统', img: require('../../../assets/issue/shache.png') ,url: '/shache'},
        { id: 3, name: '车体部件', img: require('../../../assets/issue/cheti.png'), url: '/cheti'},
        { id: 4, name: '异响', img: require('../../../assets/issue/yixiang.png'), url: '/yixiang'},
        { id: 5, name: '电池', img: require('../../../assets/issue/dianchi.png'), url: '/dianchi'},
        { id: 6, name: '充电器', img: require('../../../assets/issue/chongdian.png'), url: '/chongdian1'},
        { id: 7, name: '电器系统', img: require('../../../assets/issue/dianqi.png'), url: '/dianqi'},
        { id: 8, name: '钥匙锁具', img: require('../../../assets/issue/yaoshi.png'), url: '/yaoshi'},
        { id: 9, name: '故障代码', img: require('../../../assets/issue/guzhang.png'), url: '/guzhang'},
        { id: 10, name: 'APP问题', img: require('../../../assets/issue/app.png'), url: '/guzhang'},
      ],
      issueList:[
        // { id: 11, name: '电池掉电快', url: '/details?id=1'},
        // { id: 12, name: '刹车异响', url: '/details?id=1' },
        // { id: 13, name: '电池续航不足', url: '/details?id=1' },
        // { id: 14, name: 'P档无法解除', url: '/details?id=1' },
      ]
    }
  },
  mounted(){
    Toast.loading({duration:1000,mask: false,message: '加载中...'});

  },
  methods:{
    h5Handler(url){
      this.$router.push({ path:url  })
    }

  }
}
</script>

<style scoped lang="scss">
.container{
  width:100%;
  height:100%;
  text-align: left;
}
.service-point{
  display: flex;
  flex-direction:row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.serviceList{
  display: flex;
  flex-direction:column;
  justify-content:center;
  align-items: center;
  width:55px;
  height:55px;
  margin:15px 16px;
}
.serviceList .ico{
  width:32px;
  height:25px;
}
.serviceList span{
  margin-top:5px;
  font-size:13px;
  color:#5a5f65;
}
.customStyle{
  height:45px;
}
.customStyle .van-cell__title{
  color:#666;
}
.tit{
  width:100%;
  height:50px;
  padding-left:4%;

  font-size:14px;
  line-height: 50px;
  font-weight:500;
  background: #eee;
  color:#333;
}
</style>